<template>
  <view class="status-bar">
    <view class="left">
      <text class="time">9:41</text>
      <text class="company">公司名称</text>
    </view>
    <view class="center">
      <text class="page-title"> 首页</text>
    </view>
    <view class="right">
      <view class="signal"></view>
      <view class="wifi"></view>
      <view class="battery"></view>
      <view class="more">⋯</view>
      <view class="location"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'StatusBar'
};
</script>

<style scoped lang="scss">
@import "../../../static/common.scss";

.status-bar {
  @include flex-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.left, .right {
  @include flex-row;
  align-items: center;
  gap: 10rpx;
}

.time {
  font-size: 28rpx;
  font-weight: bold;
}

.company {
  font-size: 24rpx;
  color: #666;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.right {
  gap: 15rpx;
}
</style>